<template>
	<div class="atuser-list">
    <ul>
      <li v-for="(item,index) in converMember" :key="index">
        <div class="top-content">
          <div class="avatar-left" @click="fnchangeConver(item)">
            <img src="@/assets/image/img-shadow.png" class="head-shadow">
            <avatar :src="item.faceUrl" :imgType="3" />
            <img src="@/assets/image/btn_qusiliao@2x.png" class="chat-img" v-if="item.allowPrivateChat" />
          </div>
          <div class="name">
            <div class="text-ellipsis">{{item.nickname}}</div>
          </div>
          <p>{{item.healthManagerTypeName}}</p>
        </div>
        <p>{{item.healthManagerDesc}}</p>
        <img src="@/assets/image/yinzhang.png" />
      </li>
    </ul>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  title: '健康管理团队',
  data() {
    return {
    }
  },
  computed: {
    ...mapState({
      converMember: state => state.conversation.converMember,
      currentConversation: state => state.conversation.currentConversation
    }),
  },
  created() {
  },
  mounted(){
    document.title="健康管理团队"
    this.$setCookie('chatpageback','group-mem')
    if(this.$route.query.conversationid&&this.$route.query.conversationid!=this.currentConversation.conversationID){
      this.$store.dispatch(
        'checkoutConversation',
        this.$route.query.conversationid
      )
    }
  },
  methods: {
    //切换私聊
    fnchangeConver(item){
      if(item.allowPrivateChat){
        this.$router.push({
          path: '/im/chat',
          query: {
            conversationid: 'C2C'+item.imAccount
          }
        })
        // this.$store.dispatch(
        //   'checkoutConversation',
        //   'C2C'+item.imAccount
        // )
        // this.$router.back()
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.atuser-list{
  background-image: linear-gradient(0deg, rgba(252,252,252,0.50) 14%, #F7F7F7 100%);
  padding: .026667rem .866667rem .8rem;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: white;
  ul{
    margin-top: 1.013333rem;
    li{
      width: 100%;
      position: relative;
      padding: .426667rem .613333rem .8rem .613333rem;
      background: #F5F7FD;
      border-radius: .32rem;
      position: relative;
      margin-bottom: 1.653333rem;
      &>img{
        position: absolute;
        right: -.306667rem;
        bottom: -.706667rem;
        width: 1.84rem;
        height: 1.546667rem;
      }
      .top-content{
        width: 100%;
        height: 1.146667rem; 
        position: relative;
        padding-left: 2.613333rem;
        .avatar-left{
          position: absolute;
          bottom: 0;
          left: 0;
          width: 2.293333rem;
          height: 2.293333rem;
          background: #f5f5f5;
          border-radius: .213333rem;
          .avatar{
            position: relative;
          }
          .head-shadow{
            width: 150%;
            height: 150%;
            position: absolute;
            bottom: -50%;
            left: -25%;
          }
          .chat-img{
            position: absolute;
            bottom: -.093333rem;
            left: 50%;
            margin-left: -.8rem;
            width: 1.6rem;
            height: .56rem;
          }
        }
        .name{
          display: flex;
          align-items: center;
          width: 100%;
          height: .586667rem;
          margin-bottom: .12rem;
          .text-ellipsis{
            flex: 0 1 auto;
            font-size: .426667rem;
            color: black;
            @include ellipsis();
          }
          .conver-label{
            display: flex;
            align-items: center;
            flex-shrink: 0;
            padding: 0 .2rem;
            height: .453333rem;
            font-size: .32rem;
            color: white;
            background: #A49272;
            border-radius: .261333rem;
          }
        }
        &>p{
          font-size: .32rem;
          color: #9B9B9B;
          height: .44rem;
          display: flex;
          align-items: center;
        }
      }
      &>p{
        font-size: .346667rem;
        color: #3D3D3D;
        text-align: left;
        line-height: .586667rem;
        width: 100%;
        margin-top: .32rem;
        word-wrap: break-word;
        word-break: break-all;
      }
    }
  }
}
</style>